<template>
  <div class="video-device-setalarm">
    <h2 style="display:inline-block;">{{baseInfo.deviceName}}报警设置:</h2>
    <Form style="margin:0 auto;" :model="formData" :label-width="120" :rules="formRules" ref="collectparamsRef">
      <Col :span="12">
      <FormItem label="温度上限:" prop="tempUpper">
        <Input v-model="formData.tempUpper">
        <span slot="append">单位(℃)</span>
        </Input>
      </FormItem>
      <FormItem label="温度下限:" prop="tempLower">
        <Input v-model="formData.tempLower">
        <span slot="append">单位(℃)</span>
        </Input>
      </FormItem>
      <FormItem label="湿度上限:" prop="humidnessUpper">
        <Input v-model="formData.humidnessUpper">
        <span slot="append">单位(%RH)</span>
        </Input>
      </FormItem>
      <FormItem label="湿度下限:" prop="humidnessLower">
        <Input v-model="formData.humidnessLower">
        <span slot="append">单位(%RH)</span>
        </Input>
      </FormItem>
      <FormItem label="电压下限:" prop="voltageError">
        <Input v-model="formData.voltageError">
        <span slot="append">单位(mV)</span>
        </Input>
      </FormItem>
      <FormItem>
        <Button type="info" @click="handelSubmit" :loading="btnSaveDisable">
          <span v-if="!btnSaveDisable">保存</span>
          <span v-else>保存中</span>
        </Button>
      </FormItem>
      </Col>
    </Form>
  </div>
</template>


<script>
  import {
    getOdDetail,
    getOdParam,
    putOdParam
  } from '@/api';
  import {
    formData,
    formRules
  } from './material';
  export default {
    props: ['id'],

    watch: {
      'id'() {
        this.getInitialState();
      }
    },

    mounted() {
      this.getInitialState();
    },

    data() {
      return {
        btnSaveDisable: false,
        formData: {
          ...formData
        },
        formRules: {
          ...formRules
        },
        editId: "",
        baseInfo: {}
      }
    },

    methods: {
      getInitialState() {
        const vm = this;
        let params = {
          id: vm.id
        }
        getOdDetail(params).then(res => {
          if (res.code === 200) {
            vm.baseInfo = res.data;
          }
        })
        getOdParam(params).then(res => {
          if (res.code === 200) {
            if (!!res.data) {
              vm.editId = res.data.id;
              let {
                tempUpper,
                tempLower,
                humidnessUpper,
                humidnessLower,
                voltageError
              } = res.data;
              tempUpper = tempUpper + '';
              tempLower = tempLower + '';
              humidnessUpper = humidnessUpper + '';
              voltageError = voltageError + '';
              humidnessLower = humidnessLower + '';
              vm.formData = {
                tempUpper,
                tempLower,
                humidnessUpper,
                humidnessLower,
                voltageError
              };
            }
          }
        })
      },

      handelSubmit() {
        const vm = this;
        vm.$refs.collectparamsRef.validate(valid => {
          if (valid) {
            vm.btnSaveDisable = true;
            vm.submit();
          }
        })
      },

      submit() {
        const vm = this;
        let {
          tempUpper,
          tempLower,
          humidnessUpper,
          humidnessLower,
          voltageError
        } = vm.formData;
        let odId = vm.id,
          id = vm.editId,
          params = {
            tempUpper,
            tempLower,
            humidnessUpper,
            humidnessLower,
            voltageError,
            odId,
            id
          };
        putOdParam(params).then(res => {
          if (res.code === 200) {
            vm.getInitialState();
            this.$Message.success('操作成功');
            setTimeout(_ => {
              vm.btnSaveDisable = false;
            }, 500)
          } else {
            this.$Message.error(res.message);
            setTimeout(_ => {
              vm.btnSaveDisable = false;
            }, 500)
          }
        })
      }
    }
  }

</script>
